<template>
  <div class="insert-player">
    <el-button  type="success" @click="insertVisibility = !insertVisibility"
    >新增</el-button
    >

    <el-dialog :visible.sync="insertVisibility">
      <el-form
        ref="player"
        class="player"
        :model="player"
        :rules="rules"
        label-position="right"
        label-width="120px"
      >
        <!--      字段不能为空  20开头的十位数字 -->
        <el-form-item prop="usernameFk" label="用户名：">
          <el-input v-model.trim="player.usernameFk"></el-input>
        </el-form-item>

        <el-form-item prop="nickname" label="昵称：">
          <el-input v-model="player.nickname"></el-input>
        </el-form-item>
        <el-form-item prop="goldCoin" label="金币数量：">
          <el-input v-model.number="player.goldCoin"></el-input>
        </el-form-item>
        <el-form-item prop="silverCoin" label="银币数量：">
          <el-input v-model.number="player.silverCoin"></el-input>
        </el-form-item>
        <el-form-item label="职业：" prop="profession">
          <el-select v-model="player.profession">
            <!--          <el-option value="a" label="王"></el-option>-->
            <!--          <el-option value="b" label="小"></el-option>-->
            <!--          <el-option value="c" label="在"></el-option>-->
            <el-option
              v-for="e in $store.state.professionTypes"
              :key="e.index"
              :label="e.text"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" @click="playerSubmit()"
          >提交
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => $refs.player.resetFields()"
          >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import New from './components/New.vue';
export default {
  name: "InsertPlayer",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: "lisi",
    },
    abc: String,
  },

  data() {
    return {
      sampleD: "value",
      player: {
        usernameFk: "2018020055",
        nickname: null,
        goldCoin: null,
        silverCoin: null,
        profession: "writer",

        playerCode: "",
        playerId: 0,
        version: 0,
      },
      insertVisibility: false,
      // rules: {
      //     username: [
      //         {required: true,   message: '请输入账号', trigger: 'blur'},
      //         {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur','change']},
      //         { validator:this.validateItem ,trigger:'blur'}
      //         ],
      //     password: [
      //         {required: true, message: '请输入密码', trigger: 'blur'},
      //         ],
      //     }
      //
      rules: {
        usernameFk: [
          { required: true, message: "此条目必须填写", trigger: "blur" },
          //
          //20 18255555  20[0-9]{8}
          {
            pattern: /^20[0-9]{8}$/,
            message: "必须是20开头的十位数字",
            trigger: "blur",
          },
        ],
        // 要求gold coin 必须是>10 < 90的偶数
        goldCoin: [
          { required: true, message: "此条目必须填写", trigger: "blur" },
          { validator: this.valiGoldCoin, trigger: "blur" },
        ],
        silverCoin: [
          { required: true, message: "此条目必须填写", trigger: "blur" },
          { validator: this.valiGoldCoin, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    playerSubmit() {
      //
      // document.getElementById("player").validate()
      // this.getEmlmentByRef("player")
      // this.$refs['player']
      this.$refs.player.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/ceto/player/insert",
            data: this.player,
          }).then(
            (res) => {
              // this.$message.warning(JSON.stringify(res.data));
              if (res.data.playerId) {
                this.insertVisibility = false;
                // postSubmit()
                this.$emit("postSubmit");
              }
            },
            (error) => {
              console.log(".player request error : " + error.response.status);
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
    valiGoldCoin(rule, value, callback) {
      // callback 在所有分支都必须运行，区别在于是否有error参数
      // console.log(value, typeof value);
      if (isNaN(value)) {
        return callback(new Error("请输入数字"));
      }
      if (value > 90 || value < 10) {
        return callback(new Error("数值必须在10到90之间"));
      }
      return callback();

      // let isExits = true
      // if (isExits) {
      //         callback(new Error('用户名已经存在'))
      //     } else {
      //         callback()
      // }
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 350px;
}

.insert-player {
  background: rgba(216, 208, 78, 0.62);
}
</style>
